<template>
  <wrapper>
    <description :infos="infos">
      <div class="drag">
        <div
          v-show="show"
          v-drag
          class="content"
          style="width: 200px; z-index: 20"
        >
          <img
            id="target"
            ref="element"
            class="target"
            style="width: 100%"
            src="../../assets/快速构建.png"
          />
        </div>
      </div>
    </description>
  </wrapper>
</template>
<script>
export default {
  directives: {
    drag(el) {
      const oDiv = el;
      oDiv.onmousedown = function (e) {
        const disX = e.clientX - oDiv.offsetLeft;
        const disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          const l = e.clientX - disX;
          const t = e.clientY - disY;
          oDiv.style.left = l + "px";
          oDiv.style.top = t + "px";
        };
        document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
        };
        return false;
      };
    },
  },
  // components:{
  //   wrapper,
  //   description
  // },
  props: {
    shows: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dd: "",
      inout: "",
      show: true,
      current: 0,
      name: "",
      multiples: 1,

      infos: {
        title: "拖曳", //功能标题
        desc: "实现界面鼠标拖动", //功能描述
        methodDesc: [
          "1 template中让实现拖曳的盒子添加v-drag；",
          "2 使用directives",
        ], //实现原理
      },
    };
  },
  mounted(){
  },
  watch: {
  },
  methods: {
    handlerotate() {
      this.current = (this.current + 90) % 360;
    },
    handlebig() {
      this.multiples = Number(this.multiples) + 0.1;
    },
    handleReduce() {
      this.multiples = Number(this.multiples) - 0.1;
    },
    handleClose() {
      this.$emit("update:shows", false);
    },
  },
};
</script>
<style scoped>
.drag {
  position: relative;
  width: 80%;
  height: 100%;
}
.content {
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  cursor: pointer;
  z-index: 99;
}
.target {
  text-align: center;
  display: inline-block;
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #eeff99;
}
.button {
  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 95%;
  z-index: 200;
}
</style>
